<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表单新增的type属性</title>
</head>

<body>

    <form action="" id="myForm">
        <!--
				placeholder: 提示语
				autofocus: 自动获取焦点
				autocomplete: 自动完成
							  1.必须提交成功后
							  2.必须有name属性
			 -->
        用户名:
        <input type="text" placeholder="请输入用户名" name="userName" id="userName" autocomplete="on" autofocus>
        <br>
        <!--
			  tel: 不会实现验证,仅仅提供移动设备弹出数字键盘
				required: 必须输入,如果没有则会阻止当前数据提交
				pattern: 正则验证
			 -->
        手机号:
        <input type="tel" name="userTel" id="userTel" placeholder="请输入手机号" required pattern="^(\+86)?1\d{10}$">
        <br>

        <!--
				 multiple: 开启多值
				 -->
        文件:
        <input type="file" name="photo" id="photo" value="选择文件" multiple>
        <br>

        <!-- multiple用在email的时候,可以输入多个邮箱,以逗号","分隔-->
        邮箱:
        <input type="email" name="email" id="email" multiple>
        <br>


        <input type="submit" value="提交">
        <br>
				<br>
				<br>
    </form>

    <!--以下表单元素,没有包含在form里面,默认不会实现提交
				 可以使用form 根据from的id进行关联提交
		 -->
    地址:
    <input type="text" name="address" form="myForm">
    <br>

</body>

</html>
